import * as React from 'react'
import { connect } from 'react-redux';
import { getAssignment, getReviewQuiz, submitSimpleCodingQuizAnswer, getHomeworkQuizzes, getRunningLogs } from '../../../actions/assignment';
import { Card } from 'antd/es';
import ReviewQuizBox from '../../common/ReviewQuizBox';
import TwsReactMarkdownPreview from '../../common/markdown/MarkdownPreview'
import AnswerSubmitBox from './AnswerSubmitBox'
declare var vscode:any;
class SimpleCodingQuizBody extends React.Component<any> {
    state = {
        userAnswerRepo: '',
        branch: '',
        loading: false,
    }

    componentDidMount = () => {
        const { id, quizId } = this.props
        this.load(id, quizId)
    }

    componentWillReceiveProps = (nextProps: any) => {
        const { id, quizId } = nextProps
        if (id === this.props.id) {
            return false
        }
        this.setState({ loading: false })
        this.load(id, quizId)
        return true
    }

    load = (assignmentId: number, quizId: number) => {
        const { userId } = vscode.getState()
        this.props.getAssignment(assignmentId, () => {
            const { assignment } = this.props
            const quiz = assignment[0]
            this.setState({
                userAnswerRepo: quiz.userAnswer,
                branch: quiz.answerBranch
            })
        })
        this.props.getReviewQuiz(assignmentId, quizId)
        this.props.getRunningLogs(userId, assignmentId, quizId)
    }

    setLoading = (loading: boolean) => {
        this.setState({ loading })
    }

    render() {
        let { assignment, reviewQuiz, submission, task, id } = this.props
        let { userAnswerRepo, branch, loading } = this.state
        const quiz = assignment[0]
        return <Card title={quiz.assignmentTitle}
            noHovering
            bordered={false}
            extra={<ReviewQuizBox reviewQuiz={reviewQuiz} />}
            key={0}>
            <div>
                <h4>作业内容</h4>
                <div className='markdown-wrap'>
                    <TwsReactMarkdownPreview source={quiz.description} />
                </div>
                <AnswerSubmitBox
                    loading={loading}
                    userAnswerRepo={userAnswerRepo}
                    branch={branch}
                    quiz={quiz}
                    submission={submission}
                    reviewQuiz={reviewQuiz}
                    task={task}
                    getRunningLogs={this.props.getRunningLogs}
                    setLoading={this.setLoading}
                    getHomeworkQuizzes={this.props.getHomeworkQuizzes}
                    submitSimpleCodingQuizAnswer={this.props.submitSimpleCodingQuizAnswer}
                    getAssignment={this.props.getAssignment}
                    id={id}
                />
            </div>
        </Card>
    }
}

const mapStateToProps = ({ task, assignment, reviewQuiz, submission, homeworkQuizzes }:
    { task: any, assignment: Array<any>, reviewQuiz: any, submission: any, homeworkQuizzes: Array<any> }) => ({
        task,
        reviewQuiz,
        assignment,
        submission,
        quizzes: homeworkQuizzes
    })
const mapDispatchToProps = (dispatch: Function) => ({
    getAssignment: (assignmentId: number, callback: Function) => dispatch(getAssignment(assignmentId, callback)),
    submitSimpleCodingQuizAnswer: (data: any, callback: Function) => dispatch(submitSimpleCodingQuizAnswer(data, callback)),
    getReviewQuiz: (assignmentId: number, quizId: number) => dispatch(getReviewQuiz(assignmentId, quizId)),
    getHomeworkQuizzes: (assignmentId: number) => dispatch(getHomeworkQuizzes(assignmentId)),
    getRunningLogs: (userId: number, assignmentId: number, quizId: number, callback: Function) => dispatch(getRunningLogs(userId, assignmentId, quizId, callback))
})

export default connect(mapStateToProps, mapDispatchToProps)((SimpleCodingQuizBody))